<template>
	<view class="contentBox">
		<baTreePicker ref="treePicker" :multiple='false' @select-change="selectChange" title="请选择"
			:localdata="deptUserList" :selectParent="false" valueKey="value" textKey="text" childrenKey="children" style="position: relative;z-index: 9;"></baTreePicker>
		<view class="errorItem" v-for="(item,index) in errorList" :key="item.id" style="position: relative;z-index: 6;">
			<view class="eiTitle">
				{{item.unusualName}}
				<span class="expandSpan" v-if="!item.show" @click="changeVisib(index)">
					展开
				</span>
				<span class="colipSpan" v-if="item.show" @click="changeVisib(index)">
					收起
				</span>
			</view>
			<view style="display: flex;justify-content: space-between;align-items: center;">
				<view class="detailItem">
					<span style="color: rgba(153, 153, 153, 1);">当前主责人：</span>
					<span> {{repUser}}</span>
				</view>
				<!-- rgba(255, 147, 21, 0.10) -->
				<span :class="item.status == '2'?'hasRep':'ingRep'">
					{{item.status == '2'?'已处理':'待处理'}}
				</span>
			</view>
			<!-- 问题描述	 -->
			<view class="detail"  v-show="item.show" style="border: 1px solid #DCDFE6;padding: 20rpx;border-radius: 4rpx;box-shadow: 6rpx 6rpx 16rpx #DCDFE6;">
				<view class="requestLable" style="font-weight: bold;">
					问题描述
				</view>
				<view v-for="(tt,ti) in item.issueList" style="color: rgba(153, 153, 153, 1);">
					{{ti+1}}:{{tt.issueDesc}}
				</view>
			</view>
			<!-- 问题历史详情 -->
			<view class="detail" v-if="item.show">
				<view class="detailItemSource" v-for="(ii,iiIndex) in item.courseList" :key="iiIndex">
					<view style="display: flex;justify-content: space-between;" v-show="false">
						<view style="color: rgba(20, 203, 159, 1);font-weight: bold;">{{ii.createTime}}</view>
						<view class="repName"><span style="color: rgba(153, 153, 153, 1);">上阶段处理人：</span>{{idToName('username',ii.unusualInitiatorId) || '--'}}</view>
					</view>
					<view style="color: rgba(153, 153, 153, 1);display: flex;" v-if="iiIndex != item.courseList.length-1">
						<span style="flex-shrink: 0;width:90px;">处理意见:</span>
						<span>
							{{ii.remark || '--'}}
						</span>
					</view>
					<!-- 最后一个节点，并且未处理 -->
					<view class="currentAct" v-if="iiIndex==item.courseList.length-1 && ii.status=='1'">
						<view style="display: flex;position: relative;z-index: 999;">
							<span style="width:90px;flex-shrink: 0;">移交处理人:</span>
							<input disabled="disabled" @click="showPicker(item.id)" v-model="allData[item.id].actUserName" style="border-bottom:1px solid #DCDFE6;"/> 
							<input type="hidden" style="display: none;" v-model="allData[item.id].actUserCodeName"/>
						</view>
						<view style="display: flex;margin-top: 12px;">
							<span style="width:90px;flex-shrink: 0;">处理意见:</span>
							<textarea v-model="allData[currentIdKey].actRemark" type="text" class="detailText"></textarea>
						</view>
						<view style="display: flex;" v-if="item.createBy == userInfo.username">
							<span style="width:90px;flex-shrink: 0;">是否已解决:</span>
							<superweicombox style="margin-top: 12rpx;" class="detailInput" :candidates="[{id:'1',name:'否'},{id:'2',name:'是'}]" :isJSON="true" keyName="name" placeholder="请输入选择"
								@select="select_json"></superweicombox>
							<!-- <picker mode="selector" class="detailInput" v-model="ii.status" :range="statusList" @change="changeStatus(ii)">
								<view class="picker">
									{{(Number(isOrNo)>-1)
										?statusList[isOrNo] || '请选择'
										:'未选择'
									}}
								</view>
							</picker> -->
						</view>
						<view class="subButton" @click="addHis(item.id,ii.id)">提交</view>
					</view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	import { ACCESS_TOKEN,USER_NAME,USER_INFO } from "@/common/util/constants"
	import superweicombox from "@/components/superwei-combox/components/superwei-combox/superwei-combox.vue"
	import baTreePicker from "@/components/ba-tree-picker/ba-tree-picker.vue"
	export default {
		components:{superweicombox,baTreePicker},
		data() {
			return {
				isOrNo:-1,
				statusList:['是','否'],
				errorList:[],
				userInfo:uni.getStorageSync(USER_INFO),
				repUser:'',
				userList:[],
				deptUserList:[],
				deptList:[],
				userText:'',
				userName:'',
				userCodeName:'',//当前人账号
				userIndex:-1,
				currentIdKey:'',//当前操作的问题id
				allData:{},//所有操作的数据
				remark:'',//处理意见
				listData:[
				    {
				        id: 1,
				        name: '公司1',
				        children: [{
				            id: 11,
				            name: '研发部',
				            children: [{
				                id: 111,
				                name: '张三',
				                
				            },{
				                id: 112,
				                name: '李四',
				                
				            }]
				        },{
				            id: 12,
				            name: '综合部',
				            
				        } ]
				    },
				    {
				        id: 2,
				        name: '公司2',
				        children: [{
				            id: 21,
				            name: '研发部',
				            
				        },{
				            id: 22,
				            name: '综合部',
				            
				        },{
				            id: 23,
				            name: '财务部',
				            
				        }, ]
				    },
				    {
				        id: 3,
				        name: '公司3'
				    },
				    {
				        id: 4,
				        name: '公司4',
				        children: [{
				            id: 41,
				            name: '研发部',
				            
				        }]
				    }
				]
			}
		},
		async mounted() {
			await this.getUserList();
			this.getErrorList();
			this.getCurrentUser();
		},
		methods: {
			// 显示人员选择器
			showPicker(cId) {
				this.currentIdKey=cId;
				let piker = this.$refs.treePicker;
				console.log(piker.showDialog)
				piker.showDialog?piker._hide():piker._show();
			},
			//监听选择（ids为数组）
			selectChange(ids, names) {
				console.log(ids, names);
				this.allData[this.currentIdKey].actUserName=names;
				this.allData[this.currentIdKey].actUserCodeName=ids[0];
			},
			changeRemark(val){
				console.log(val)
				this.allData[this.currentIdKey].actRemark=val;
			},
			idToName(key,value){
				// unusualId
				let cUser = this.userList.filter(item=>{
					return item[key]==value
				})
				if(cUser && cUser.length){
					return cUser[0].realname
				}else{
					return '未匹配人选'
				}
			},
			input_json(e) {
				console.log('下拉输入',e) // 选项一
			},
			select_json(e) {
				console.log('json下拉',this.errorList) // {id: '1',name: '选项一'}
				console.log(this.userText);
				this.allData[this.currentIdKey].status = e.id
			},
			changeStatus(val){
				console.log(val)
				// this.isOrNo = val.detail.value
			},
			changeVisib(index){
				let _this= this;
				// 将其他的合上,避免获取不到当前操作问题数据
				this.errorList.map((item,ii)=>{
					if(ii != index){
						_this.$set(_this.errorList[ii],'show',false)
					}else{
						_this.currentIdKey = item.id;
						_this.$set(_this.errorList[index],'show',!_this.errorList[index].show)
					}
				})
				console.log(this.errorList)
				
			},
			// 新增历史栈
			addHis(mainId,id){
				let _this = this;
				if(this.allData[mainId].status=='1'&& !(this.allData[mainId].actUserCodeName)){
					return this.$tip.toast('请选择指派人！');
				}
				// 更新补充当前数据
				this.$http.post('/inspect/insClassesUnusualMsg/editInsClassesUnusualMsgCourse',{
					id:id,
					unusualId:mainId,
					status:'2',//状态 0:暂停 1处理中；2已解决,
					remark:this.allData[this.currentIdKey].actRemark//处理意见
				}).then(res=>{
					// 新增下一条数据[未解决的时候,并且指派给某人]
					if(this.allData[mainId].status=='1' && this.allData[mainId].actUserCodeName){
						this.$http.post('/inspect/insClassesUnusualMsg/addInsClassesUnusualMsgCourse',{
							unusualId:mainId,
							unusualInitiatorId:uni.getStorageSync(USER_INFO).username,//发起人
							status:'1',//状态 0:暂停 1处理中；2已解决,
							unusualRecipientId:this.allData[this.currentIdKey].actUserCodeName,//当前责任人
						}).then(res=>{
							console.log(res.data.result);
							if(res.data.success){
								_this.$tip.toast('提交成功！');
								uni.navigateTo({
									url: '/pages/index/index'
								});
							}else{
								_this.$tip.toast(res.data.message);
							}
						})
					}else{
						if(res.data.success){
							_this.$tip.toast('提交成功！');
							uni.navigateTo({
								url: '/pages/index/index'
							});
						}else{
							_this.$tip.toast(res.data.message);
						}
					}
					console.log(res.data.result)
				})
				
				
			},
			async getUserList(){
				let _this = this;
				await this.$http.get('/sys/dict/getDictItems/sys_depart,depart_name,org_code').then(res=>{
					_this.deptList=res.data.result;
				})
			
				await this.$http.get('/sys/user/list?pageNo=1&pageSize=9999').then((res)=>{
					_this.$set(_this,'userList',res.data.result.records);
				})
				let users = JSON.parse(JSON.stringify(_this.userList))
				_this.deptUserList = _this.deptList.map(item=>{
					return {
						...item,
						children:users.filter(ii=>{
							if(ii.orgCode){
								console.log(101112)
								return ii?.orgCode.split(',').some(tt=>{
									return tt == item.value
								})
							}else{
								return false;
							}
						}).map(ee=>{return {
							...ee,
							value:ee.username,
							text:ee.realname
						}})
					}
				})
			},
			getCurrentUser(){
				console.log(uni.getStorageSync(USER_INFO))
				this.repUser = uni.getStorageSync(USER_INFO).realname;
			},
			getErrorList(){
				let _this = this;
				this.$http.get('/inspect/insClassesUnusualMsg/queryIssueByUserId')
					.then(res=>{
						console.log('查询异常res:',res.data.result);
						this.errorList = res.data.result.map(item=>{
							_this.$set(_this.allData,item.id,{actUserName:_this.idToName('username',item.createBy),actUserCodeName:item.createBy,actRemark:'',status:'1'})
							return {...item,show:false}
						});
					})
			}
		}
	}
</script>

<style scoped>
	.detail{
		overflow: hidden;
	}
	.colipSpan,.expandSpan{
		float: right;
		font-size: 12px;
		font-weight: normal;
	}
	.subButton{
		background-color: rgba(19, 202, 156, 1);
		color: #fff;
		text-align: center;
		line-height: 28px;
		border-radius: 4px;
		margin-top: 20px;
	}
	.contentBox{
		width: 100vw;
		height: 100vh;
	}
	.detailItemSource:nth-last-of-type(1)::after{
		display: none;
	}
	.detailItemSource{
		background-color: rgba(243, 244, 249, 1);
		padding-left: 10px 10px 10px 32px;
		position: relative;
		/* max-height: 150px; */
		overflow: auto;
		margin-top: 30px;
		border-radius: 4px;
		padding: 12px;
	}
	.detailText{
		height: 78px;
		border: 1px solid #999;
		border-radius: 3px;
	}
	/* .detailItemSource::before{
		content: "";
		position: absolute;
		top: 20px;
		left: 12px;
		width: 10px;
		height: 10px;
		border: 2px solid rgba(20, 203, 159, 1);
		box-shadow: 0px 0px 6px rgba(20, 203, 159, 0.4);
		background-color: #fff;
		z-index: 2;
		border-radius: 10px;
	}
	.detailItemSource::after{
		content: "";
		position: absolute;
		z-index: 1;
		top: 30px;
		left: 17px;
		width: 2px;
		height: 150px;
		background:rgba(20, 203, 159, 1);
		box-shadow: 0px 0px 6px rgba(20, 203, 159, 0.4);
	} */
	.detailItem{
		display: flex;
		height: 40px;
		align-items: center;
	}
	.hasRep{
		width: 45px;
		height: 20px;
		background-color: rgba(55, 135, 255, 0.10);
		color: rgba(55, 135, 255, 1);
		line-height: 20px;
		font-size: 10px;
		text-align: center;
		border-radius: 3px;
	}
	.ingRep{
		width: 45px;
		height: 20px;
		background-color: rgba(255, 147, 21, 0.10);
		color: rgba(255, 147, 21, 1);
		line-height: 20px;
		font-size: 10px;
		text-align: center;
		border-radius: 3px;
	}
	.errorItem{
		background-color: #fff;
		border-radius: 8px;
		margin: 12px 10px;
		font-size: 13px;
		padding: 12px;
		line-height: 28px;
	}
	.eiTitle{
		font-weight: bold;
		font-size: 16px;
	}
	.picker{
		border-bottom: 1px solid #999;
	}
</style>
